/*
 * @Author: cgl
 * @Date: 2023-04-12 15:25:43
 * @LastEditors: cgl
 * @LastEditTime: 2023-07-17 16:49:04
 * @FilePath: \public-health-emergencies-fed:\radiation-hygiene-fe\src\directive\dialog\drag.js
 * @Description: 
 * 
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved. 
 */
/**
* v-dialogDrag 弹窗拖拽
* Copyright (c) 2019 ruoyi
*/

export default {
  bind(el, binding, vnode, oldVnode) {
    const value = binding.value
    if (value == false) return
    // 拖拽内容头部
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    let dragDom = el.querySelector('.el-dialog');
    dialogHeaderEl.style.cursor = 'move';
    // 鼠标按下事件
    dialogHeaderEl.onmousedown = (e) => {
      // 边界
			let bounceLeft = dragDom.offsetLeft;
			let bounceRight = bounceLeft;
			let bounceTop = dragDom.offsetTop;
			let bounceBottom = bounceTop;
			// 按下的位置
      let enterX = e.clientX;
      let enterY = e.clientY;
			// 按下时弹框transform值
			let transformX = 0;
			let transformY = 0;
			if (dragDom.style.transform) {
				transformX = +dragDom.style.transform.match(/translate\((\S*)px,/)[1];
				transformY = +dragDom.style.transform.match(/\s(\S*)px\)/)[1];
			}
			// 保存上一次拖动位置
			let oldClientX = 0;
			let oldClientY = 0;
			let orient = null;

      // 鼠标拖动事件
      document.onmousemove = function (e) {
        // 拖动的距离
        let disX = e.clientX - enterX;
        let disY = e.clientY - enterY;
				// 拖动的方向
				if(e.clientX > oldClientX) {
					orient = "right";
				}else {
					orient = "left";
				}
				if(e.clientY > oldClientY) {
					orient = "top";
				}else {
					orient = "bottom";
				}
				
				if(!dragDom.style.transform) {
					dragDom.style.transform = `translate(${transformX + disX}px, ${transformY + disY}px)`;
				}

				if (transformX + disX >= bounceRight) {
					if (orient == "right") {
						dragDom.style.transform = dragDom.style.transform.replace(/translate\((-?\d+)/, `translate(${bounceRight}`);
					}else {
						enterX = e.clientX;
						transformX = +dragDom.style.transform.match(/translate\((\S*)px,/)[1];
					}
				}else if(-(transformX + disX) >= bounceLeft) {
					if (orient == "left" ) {
						dragDom.style.transform = dragDom.style.transform.replace(/translate\((-?\d+)/, `translate(-${bounceLeft}`);
					}else {
						enterX = e.clientX;
						transformX = +dragDom.style.transform.match(/translate\((\S*)px,/)[1];
					}
				}else {
					dragDom.style.transform = dragDom.style.transform.replace(/translate\((-?\d+)/, `translate(${transformX + disX}`);
				}
				
				if (-(transformY + disY) >= bounceTop) {
					if (orient == "top" ) {
						dragDom.style.transform = dragDom.style.transform.replace(/(-?\d+)px\)/, `-${bounceTop}px)`);
					}else {
						enterY = e.clientY;
						transformY = +dragDom.style.transform.match(/\s(\S*)px\)/)[1];
					}
				}else if(transformY + disY >= bounceBottom) {
					if (orient == "bottom" ) {
						dragDom.style.transform = dragDom.style.transform.replace(/(-?\d+)px\)/, `${bounceBottom}px)`);
					}else {
						enterY = e.clientY;
						transformY = +dragDom.style.transform.match(/\s(\S*)px\)/)[1];
					}
				}else {
					dragDom.style.transform = dragDom.style.transform.replace(/(-?\d+)px\)/, `${transformY + disY}px)`);
				}
				oldClientX = e.clientX;
				oldClientY = e.clientY;
      };
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
};